@import "../../styles/mixins";

.mshots-image__loader {
	@include onboarding-placeholder();
}

.mshots-image__container {
	cursor: pointer;
	height: 100%;
}

.hover-scroll {
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;

	&:hover {
		background-position: bottom;
	}
}

.mshots-image-visible {
	animation: fadein 300ms;
}

// Increase specificity by repeating class name.
.mshots-dummy-image.mshots-dummy-image {
	position: absolute;
	display: block;
	visibility: hidden;
	height: 0;
	width: 0;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
